<template>
  <div class="header">
    <div class="header1">
      <div class="logo" v-for="(item, index) in logo" :key="index">
        <div class="cho">
          <div class="bg"></div>
          <p>
            {{ item.chese }}<span>{{ item.eng }}</span>
          </p>
        </div>
      </div>
      <!-- <div class="input" v-for="(item, index) in search" :key="index">
        <img :src="item.url" alt="" />
        <input type="text" :placeholder="item.val" />
        <button>{{ item.but }}</button>
      </div> -->
      <!-- <div class="search_div">
         <Search></Search>
      </div> -->
    </div>
    <nav>
      <ul class="center" border="1px solid #fff">
        <li v-for="(item, index) in navs" :key="index">
          <router-link :to="item.url" class="center_nav_router">
            {{ item.name }}</router-link
          >
        </li>
      </ul>
      <!-- 二级导航 -->
      <div class="pos">
        <dl v-for="(item, index) in pos" :key="index">
          <dt><img :src="item.url" alt="" /></dt>
          <dd>{{ item.text }}</dd>
        </dl>
      </div>
    </nav>
  </div>
</template>

<script>
import $ from "jquery";
import axios from 'axios'
// import Search from "@/components/Search.vue";
export default {
  name: "Header",
  components: {
    // Search,
  },
  data: function() {
    return {
      navs: [
        { name: "首页", url: "/" },
        { name: "药膳食疗", url: "/fooddiet" },
        { name: "科室科别", url: "/department" },
        { name: "中医药大全", url: "/About" },
        { name: "民间方术", url: "/folk_aly" },
        { name: "党建文化", url: "/theculture" },
        { name: "验方软件", url: "/effective" },
        { name: "中医养生", url: "/chinesemed" },
        { name: "医院概况", url: "/hospital_stn" },
        { name: "就医指南", url: "/online_booking" },
        { name: "患者意见栏", url: "/comments_col" },
      ],
      logo: [
        {
          chese: "助康网",
          eng: "ZHU KANG WANG",
        },
      ],
      search: [
        {
          url: require("../assets/search.png"),
          val: "请输入疾病名称",
          but: "搜索",
        },
      ],
      pos: [
        {
          url: require("../assets/logo_1.png"),
          text: "内科",
        },
        {
          url: require("../assets/logo_2.png"),
          text: "外科",
        },
        {
          url: require("../assets/logo_3.png"),
          text: "妇科",
        },
        {
          url: require("../assets/logo_4.png"),
          text: "儿科",
        },
        {
          url: require("../assets/logo_5.png"),
          text: "五官科",
        },
        {
          url: require("../assets/logo_6.png"),
          text: "心脑血管科",
        },
        {
          url: require("../assets/logo_7.png"),
          text: "风湿骨病科",
        },
        {
          url: require("../assets/logo_8.png"),
          text: "皮肤科",
        },
        {
          url: require("../assets/logo_9.png"),
          text: "肿瘤科",
        },
        {
          url: require("../assets/logo_10.png"),
          text: "精神科",
        },
        {
          url: require("../assets/logo_11.png"),
          text: "男科",
        },
        {
          url: require("../assets/logo_12.png"),
          text: "内分泌科",
        },
        {
          url: require("../assets/logo_13.png"),
          text: "结缔组织",
        },
        {
          url: require("../assets/logo_14.png"),
          text: "免疫系统",
        },
        {
          url: require("../assets/logo_15.png"),
          text: "不孕不育",
        },
        {
          url: require("../assets/logo_16.png"),
          text: "神经科",
        },
        {
          url: require("../assets/logo_17.png"),
          text: "泌尿生殖",
        },
        {
          url: require("../assets/logo_18.png"),
          text: "血液科",
        },
        {
          url: require("../assets/more1.png"),
          text: "更多",
        },
      ],
    };
  },
  mounted: function() {
    $(".pos").hide();
    $(function() {
      $(".pos").hide();
      $(".logo").hover(function() {
        $(".pos").slideDown();
      });
      $(".pos").mouseenter(function() {
        $(".pos").show();
      });
      $(".pos").mouseleave(function() {
        $(".pos").fadeOut(500);
      });
    });
  },
  created:function(){
    axios
    .get('/index/topnav')
    .then(res=>{
      this.navs=res.data.data
      })
    .catch(error=>{console.log(error)})
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header {
  width: 100%;
  margin: 0 auto;
  background: #fbe7d9;
  position: relative;
}
.search_div {
  margin-right: 326px;
  margin-top: 30px;
}
.center_nav_router:hover {
  border-bottom: 4px white solid;
  padding-bottom: 6px;
}
.header1 {
  display: flex;
  justify-content: space-between;
}
.logo {
  width: 456px;
  padding: 43px 0 18px 0;
}
.bg {
  width: 102px;
  height: 102px;
  background: brown;
}
p {
  color: #a40000;
  width: 63%;
  font-size: 60px;
  font-family: "楷体";
  padding-left: 30px;
}
span {
  display: block;
  font-size: 30px;
}
.search {
  width: 267px;
  margin-top: 26px;
  margin-right: 12%;
}
.search .left_input {
  margin: 0;
}
button {
  background: brown;
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 20px;
}
nav {
  width: 100%;
  background: #a40003;
  position: relative;
}
ul {
  display: flex;
  justify-content: space-between;
  text-align: center;
  height: 50px;
  line-height: 50px;
  color: #fff;
  font-family: "楷体";
  font-size: 26px;
}
ul li {
  width: 10%;
}
.pos {
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: space-between;
  text-align: center;
  position: absolute;
  top: 0;
  z-index: 99;
}
.pos dl {
  width: 5.26%;
  color: #fff;
  font-size: 12px;
  padding: 20px 0px;
}
.pos dl dt {
  width: 33px;
  height: 45px;
  margin: 0 auto;
}
.pos dl dd {
  text-align: center;
  padding-top: 20px;
}
a {
  color: #fff;
}
.cho {
  width: 80%;
  display: flex;
  justify-content: space-between;
  margin-left: 40%;
}
</style>
